<template>
  <view class="scan-drugs">
    <camera class="camera" device-position="back" flash="auto" @error="error">
      <cover-view v-if="hideCoverImage" class="cover-img">
        <cover-image :src="imgPath"></cover-image>
      </cover-view>
      <cover-view v-else class="tips_txt">
        <cover-view>请将药盒含商标、药名的一面</cover-view> 置于框内并进行完整拍摄
      </cover-view>
    </camera>

    <!-- 拍摄按钮 -->
    <cover-view class="photo-opt">
      <cover-image
        v-if="!photoOverBtn"
        class="photo-ing"
        src="@/static/icon/photo.png"
        @click="takePhoto"
      ></cover-image>

      <cover-view v-if="photoOverBtn" class="btn" @click="again"> 重拍 </cover-view>
      <cover-view v-if="photoOverBtn" class="btn" @click="fulfill"> 上传 </cover-view>
    </cover-view>
  </view>
</template>

<script>
import { baseURL } from '@/common/baseUrl';

export default {
  data() {
    return {
      imgPath: '',
      zipPath: '',
      hideCoverImage: false, // 定格按钮
      photoOverBtn: false // 拍照按钮
    };
  },

  onShow() {
    this.again();
  },

  methods: {
    takePhoto() {
      // const data = {
      //   code: 0,
      //   message: '0',
      //   data: [
      //     {
      //       baseDrugId: '31',
      //       drugId: null,
      //       commonName: '阿托伐他汀钙胶囊',
      //       producerName: '河南天方药业股份有限公司',
      //       productCode: '00140001',
      //       productName: '尤佳',
      //       preparationUnit: '10mg',
      //       packageSize: '7',
      //       minimumUnit: '粒',
      //       packageUnit: '盒',
      //       status: 2,
      //       priceCent: 0,
      //       whScale: 0,
      //       outerPackagePicUrl:
      //         'https://img.wanhuhealth.com/images_demo/drugs/20151207/81ed75c57ebc415daa18f6d5605a30e5.jpg',
      //       useAmount: 1,
      //       frequency: 1,
      //       dosage: '胶囊剂',
      //       amount: null,
      //       largeClass: '西药',
      //       maximumDoseDailyInUnit: null,
      //       retailPrice: null,
      //       adverseReactions: null,
      //       approvalNumber: null,
      //       recommendedLevel: null,
      //       isBasicMedicine: 0,
      //       mainIngredients: null,
      //       medicineCharacter: null,
      //       indication: null,
      //       usageDosage: null,
      //       taboo: null,
      //       note: null,
      //       fdaPregnancyDrugClass: null,
      //       pregnantDrug: null,
      //       youngDrug: null,
      //       elderDrug: null,
      //       drugInteractions: null,
      //       drugOverdose: null,
      //       toxicologicalStudy: null,
      //       drugEffects: null,
      //       drugPharmacokinetics: null,
      //       medicineStorage: null,
      //       packageInstrution: null,
      //       storageCondition: null,
      //       medicineValidate: null,
      //       clinicalGuidelineElectedInfo: null,
      //       medicalInsuranceDirectoryCategory: null,
      //       isJointStock: 0,
      //       consistency: 1,
      //       wanhuDrugRating: 2,
      //       type: null,
      //       pics: [],
      //       outPics: [],
      //       innerPics: [],
      //       supplier: null
      //     },
      //     {
      //       baseDrugId: '40',
      //       drugId: null,
      //       commonName: '参松养心胶囊',
      //       producerName: '北京以岭药业有限公司',
      //       productCode: '00180001',
      //       productName: 'l',
      //       preparationUnit: '400mg',
      //       packageSize: '36',
      //       minimumUnit: '粒',
      //       packageUnit: '盒',
      //       status: 2,
      //       priceCent: 0,
      //       whScale: 0,
      //       outerPackagePicUrl:
      //         'https://img.wanhuhealth.com/images_demo/drugs/20151207/3583ba30922a4b6da90a33ee11524940.jpg',
      //       useAmount: 3,
      //       frequency: 1,
      //       dosage: '胶囊剂',
      //       amount: null,
      //       largeClass: '中成药',
      //       maximumDoseDailyInUnit: null,
      //       retailPrice: null,
      //       adverseReactions: null,
      //       approvalNumber: null,
      //       recommendedLevel: null,
      //       isBasicMedicine: 0,
      //       mainIngredients: null,
      //       medicineCharacter: null,
      //       indication: null,
      //       usageDosage: null,
      //       taboo: null,
      //       note: null,
      //       fdaPregnancyDrugClass: null,
      //       pregnantDrug: null,
      //       youngDrug: null,
      //       elderDrug: null,
      //       drugInteractions: null,
      //       drugOverdose: null,
      //       toxicologicalStudy: null,
      //       drugEffects: null,
      //       drugPharmacokinetics: null,
      //       medicineStorage: null,
      //       packageInstrution: null,
      //       storageCondition: null,
      //       medicineValidate: null,
      //       clinicalGuidelineElectedInfo: null,
      //       medicalInsuranceDirectoryCategory: null,
      //       isJointStock: 0,
      //       consistency: 1,
      //       wanhuDrugRating: 2,
      //       type: null,
      //       pics: [],
      //       outPics: [],
      //       innerPics: [],
      //       supplier: null
      //     },
      //     {
      //       baseDrugId: '43',
      //       drugId: null,
      //       commonName: '地奥心血康软胶囊',
      //       producerName: '成都地奥制药集团有限公司',
      //       productCode: '00200001',
      //       productName: 'l',
      //       preparationUnit: '0.35g',
      //       packageSize: '30',
      //       minimumUnit: '粒',
      //       packageUnit: '盒',
      //       status: 2,
      //       priceCent: 0,
      //       whScale: 0,
      //       outerPackagePicUrl:
      //         'https://img.wanhuhealth.com/images_demo/drugs/20151204/4afa81b895b54d8ca457866bad97a923.jpg',
      //       useAmount: 2,
      //       frequency: 3,
      //       dosage: '软胶囊剂',
      //       amount: null,
      //       largeClass: '中成药',
      //       maximumDoseDailyInUnit: null,
      //       retailPrice: null,
      //       adverseReactions: null,
      //       approvalNumber: null,
      //       recommendedLevel: null,
      //       isBasicMedicine: 0,
      //       mainIngredients: null,
      //       medicineCharacter: null,
      //       indication: null,
      //       usageDosage: null,
      //       taboo: null,
      //       note: null,
      //       fdaPregnancyDrugClass: null,
      //       pregnantDrug: null,
      //       youngDrug: null,
      //       elderDrug: null,
      //       drugInteractions: null,
      //       drugOverdose: null,
      //       toxicologicalStudy: null,
      //       drugEffects: null,
      //       drugPharmacokinetics: null,
      //       medicineStorage: null,
      //       packageInstrution: null,
      //       storageCondition: null,
      //       medicineValidate: null,
      //       clinicalGuidelineElectedInfo:
      //         '《冠心病稳定型心绞痛中医诊疗指南》,《中西医结合Ⅰ期心脏康复共识》,《急性心肌梗死中西医结合诊疗专家共识》',
      //       medicalInsuranceDirectoryCategory: 1,
      //       isJointStock: 0,
      //       consistency: 2,
      //       wanhuDrugRating: 2,
      //       type: null,
      //       pics: [],
      //       outPics: [],
      //       innerPics: [],
      //       supplier: null
      //     },
      //     {
      //       baseDrugId: '191',
      //       drugId: null,
      //       commonName: '金水宝胶囊',
      //       producerName: '江西济民可信金水宝制药有限公司',
      //       productCode: '00330001',
      //       productName: 'l',
      //       preparationUnit: '0.33g',
      //       packageSize: '63',
      //       minimumUnit: '粒',
      //       packageUnit: '瓶',
      //       status: 2,
      //       priceCent: 0,
      //       whScale: 0,
      //       outerPackagePicUrl:
      //         'https://img.wanhuhealth.com/images_demo/drugs/20151204/346055c46fcd44c4ae03885a3d470b29.jpg',
      //       useAmount: 6,
      //       frequency: 1,
      //       dosage: '胶囊剂',
      //       amount: null,
      //       largeClass: '中成药',
      //       maximumDoseDailyInUnit: null,
      //       retailPrice: null,
      //       adverseReactions: null,
      //       approvalNumber: null,
      //       recommendedLevel: null,
      //       isBasicMedicine: 0,
      //       mainIngredients: null,
      //       medicineCharacter: null,
      //       indication: null,
      //       usageDosage: null,
      //       taboo: null,
      //       note: null,
      //       fdaPregnancyDrugClass: null,
      //       pregnantDrug: null,
      //       youngDrug: null,
      //       elderDrug: null,
      //       drugInteractions: null,
      //       drugOverdose: null,
      //       toxicologicalStudy: null,
      //       drugEffects: null,
      //       drugPharmacokinetics: null,
      //       medicineStorage: null,
      //       packageInstrution: null,
      //       storageCondition: null,
      //       medicineValidate: null,
      //       clinicalGuidelineElectedInfo: null,
      //       medicalInsuranceDirectoryCategory: null,
      //       isJointStock: 0,
      //       consistency: 1,
      //       wanhuDrugRating: 2,
      //       type: null,
      //       pics: [],
      //       outPics: [],
      //       innerPics: [],
      //       supplier: null
      //     },
      //     {
      //       baseDrugId: '198',
      //       drugId: null,
      //       commonName: '坎地沙坦酯胶囊',
      //       producerName: '江苏苏中药业集团股份有限公司',
      //       productCode: '00380001',
      //       productName: '苏纳',
      //       preparationUnit: '4mg',
      //       packageSize: '14',
      //       minimumUnit: '粒',
      //       packageUnit: '盒',
      //       status: 2,
      //       priceCent: 0,
      //       whScale: 0,
      //       outerPackagePicUrl:
      //         'https://img.wanhuhealth.com/images_demo/drugs/20151204/f05d2528dad94c0daf809703a85218c2.jpg',
      //       useAmount: 1,
      //       frequency: 1,
      //       dosage: '胶囊剂',
      //       amount: null,
      //       largeClass: '西药',
      //       maximumDoseDailyInUnit: null,
      //       retailPrice: null,
      //       adverseReactions: null,
      //       approvalNumber: null,
      //       recommendedLevel: null,
      //       isBasicMedicine: 0,
      //       mainIngredients: null,
      //       medicineCharacter: null,
      //       indication: null,
      //       usageDosage: null,
      //       taboo: null,
      //       note: null,
      //       fdaPregnancyDrugClass: null,
      //       pregnantDrug: null,
      //       youngDrug: null,
      //       elderDrug: null,
      //       drugInteractions: null,
      //       drugOverdose: null,
      //       toxicologicalStudy: null,
      //       drugEffects: null,
      //       drugPharmacokinetics: null,
      //       medicineStorage: null,
      //       packageInstrution: null,
      //       storageCondition: null,
      //       medicineValidate: null,
      //       clinicalGuidelineElectedInfo: null,
      //       medicalInsuranceDirectoryCategory: null,
      //       isJointStock: 0,
      //       consistency: 1,
      //       wanhuDrugRating: 2,
      //       type: null,
      //       pics: [],
      //       outPics: [],
      //       innerPics: [],
      //       supplier: null
      //     },
      //     {
      //       baseDrugId: '206',
      //       drugId: null,
      //       commonName: '脑心通胶囊',
      //       producerName: '陕西步长制药有限公司',
      //       productCode: '01030001',
      //       productName: '步长',
      //       preparationUnit: '0.4g',
      //       packageSize: '36',
      //       minimumUnit: '粒',
      //       packageUnit: '盒',
      //       status: 2,
      //       priceCent: 0,
      //       whScale: 0,
      //       outerPackagePicUrl:
      //         'https://img.wanhuhealth.com/images_demo/drugs/20151204/48a0bb1da2ec4dd59ee44f7a599e0039.jpg',
      //       useAmount: 2,
      //       frequency: 3,
      //       dosage: '胶囊剂',
      //       amount: null,
      //       largeClass: '中成药',
      //       maximumDoseDailyInUnit: null,
      //       retailPrice: null,
      //       adverseReactions: null,
      //       approvalNumber: null,
      //       recommendedLevel: null,
      //       isBasicMedicine: 0,
      //       mainIngredients: null,
      //       medicineCharacter: null,
      //       indication: null,
      //       usageDosage: null,
      //       taboo: null,
      //       note: null,
      //       fdaPregnancyDrugClass: null,
      //       pregnantDrug: null,
      //       youngDrug: null,
      //       elderDrug: null,
      //       drugInteractions: null,
      //       drugOverdose: null,
      //       toxicologicalStudy: null,
      //       drugEffects: null,
      //       drugPharmacokinetics: null,
      //       medicineStorage: null,
      //       packageInstrution: null,
      //       storageCondition: null,
      //       medicineValidate: null,
      //       clinicalGuidelineElectedInfo: null,
      //       medicalInsuranceDirectoryCategory: null,
      //       isJointStock: 0,
      //       consistency: 1,
      //       wanhuDrugRating: 2,
      //       type: null,
      //       pics: [],
      //       outPics: [],
      //       innerPics: [],
      //       supplier: null
      //     },
      //     {
      //       baseDrugId: '218',
      //       drugId: null,
      //       commonName: '通心络胶囊',
      //       producerName: '石家庄以岭药业股份有限公司',
      //       productCode: '01120001',
      //       productName: '无',
      //       preparationUnit: '0.26g',
      //       packageSize: '30',
      //       minimumUnit: '粒',
      //       packageUnit: '瓶',
      //       status: 2,
      //       priceCent: 0,
      //       whScale: 0,
      //       outerPackagePicUrl:
      //         'https://img.wanhuhealth.com/images_demo/drugs/20151202/7a217a374a9f4243abdf47be306fbace.jpg',
      //       useAmount: 2,
      //       frequency: 3,
      //       dosage: '胶囊剂',
      //       amount: null,
      //       largeClass: '中成药',
      //       maximumDoseDailyInUnit: null,
      //       retailPrice: null,
      //       adverseReactions: null,
      //       approvalNumber: null,
      //       recommendedLevel: null,
      //       isBasicMedicine: 0,
      //       mainIngredients: null,
      //       medicineCharacter: null,
      //       indication: null,
      //       usageDosage: null,
      //       taboo: null,
      //       note: null,
      //       fdaPregnancyDrugClass: null,
      //       pregnantDrug: null,
      //       youngDrug: null,
      //       elderDrug: null,
      //       drugInteractions: null,
      //       drugOverdose: null,
      //       toxicologicalStudy: null,
      //       drugEffects: null,
      //       drugPharmacokinetics: null,
      //       medicineStorage: null,
      //       packageInstrution: null,
      //       storageCondition: null,
      //       medicineValidate: null,
      //       clinicalGuidelineElectedInfo: null,
      //       medicalInsuranceDirectoryCategory: null,
      //       isJointStock: 0,
      //       consistency: 1,
      //       wanhuDrugRating: 2,
      //       type: null,
      //       pics: [],
      //       outPics: [],
      //       innerPics: [],
      //       supplier: null
      //     },
      //     {
      //       baseDrugId: '234',
      //       drugId: null,
      //       commonName: '缬沙坦胶囊',
      //       producerName: '北京诺华制药有限公司',
      //       productCode: '03060001',
      //       productName: '代文',
      //       preparationUnit: '80mg',
      //       packageSize: '7',
      //       minimumUnit: '粒',
      //       packageUnit: '盒',
      //       status: 2,
      //       priceCent: 0,
      //       whScale: 0,
      //       outerPackagePicUrl:
      //         'https://img.wanhuhealth.com/images_demo/drugs/20151202/bcc4df897f8841b1aac464f08d1490cd.jpg',
      //       useAmount: 1,
      //       frequency: 1,
      //       dosage: '胶囊剂',
      //       amount: null,
      //       largeClass: '西药',
      //       maximumDoseDailyInUnit: null,
      //       retailPrice: null,
      //       adverseReactions: null,
      //       approvalNumber: null,
      //       recommendedLevel: null,
      //       isBasicMedicine: 0,
      //       mainIngredients: null,
      //       medicineCharacter: null,
      //       indication: null,
      //       usageDosage: null,
      //       taboo: null,
      //       note: null,
      //       fdaPregnancyDrugClass: null,
      //       pregnantDrug: null,
      //       youngDrug: null,
      //       elderDrug: null,
      //       drugInteractions: null,
      //       drugOverdose: null,
      //       toxicologicalStudy: null,
      //       drugEffects: null,
      //       drugPharmacokinetics: null,
      //       medicineStorage: null,
      //       packageInstrution: null,
      //       storageCondition: null,
      //       medicineValidate: null,
      //       clinicalGuidelineElectedInfo: null,
      //       medicalInsuranceDirectoryCategory: null,
      //       isJointStock: 0,
      //       consistency: 1,
      //       wanhuDrugRating: 2,
      //       type: null,
      //       pics: [],
      //       outPics: [],
      //       innerPics: [],
      //       supplier: null
      //     },
      //     {
      //       baseDrugId: '235',
      //       drugId: null,
      //       commonName: '缬沙坦胶囊',
      //       producerName: '湖南千金湘江药业股份有限公司',
      //       productCode: '03060002',
      //       productName: '湘江',
      //       preparationUnit: '80mg',
      //       packageSize: '7',
      //       minimumUnit: '粒',
      //       packageUnit: '盒',
      //       status: 2,
      //       priceCent: 0,
      //       whScale: 0,
      //       outerPackagePicUrl:
      //         'https://img.wanhuhealth.com/images_demo/drugs/20151202/4cc9aafa9441488a94c4f6c442c82215.jpg',
      //       useAmount: 1,
      //       frequency: 1,
      //       dosage: '胶囊剂',
      //       amount: null,
      //       largeClass: '西药',
      //       maximumDoseDailyInUnit: null,
      //       retailPrice: null,
      //       adverseReactions: null,
      //       approvalNumber: null,
      //       recommendedLevel: null,
      //       isBasicMedicine: 0,
      //       mainIngredients: null,
      //       medicineCharacter: null,
      //       indication: null,
      //       usageDosage: null,
      //       taboo: null,
      //       note: null,
      //       fdaPregnancyDrugClass: null,
      //       pregnantDrug: null,
      //       youngDrug: null,
      //       elderDrug: null,
      //       drugInteractions: null,
      //       drugOverdose: null,
      //       toxicologicalStudy: null,
      //       drugEffects: null,
      //       drugPharmacokinetics: null,
      //       medicineStorage: null,
      //       packageInstrution: null,
      //       storageCondition: null,
      //       medicineValidate: null,
      //       clinicalGuidelineElectedInfo: null,
      //       medicalInsuranceDirectoryCategory: null,
      //       isJointStock: 0,
      //       consistency: 1,
      //       wanhuDrugRating: 2,
      //       type: null,
      //       pics: [],
      //       outPics: [],
      //       innerPics: [],
      //       supplier: null
      //     },
      //     {
      //       baseDrugId: '236',
      //       drugId: null,
      //       commonName: '缬沙坦胶囊',
      //       producerName: '常州四药制药有限公司',
      //       productCode: '03060003',
      //       productName: '缬克',
      //       preparationUnit: '40mg',
      //       packageSize: '14',
      //       minimumUnit: '粒',
      //       packageUnit: '盒',
      //       status: 2,
      //       priceCent: 0,
      //       whScale: 0,
      //       outerPackagePicUrl:
      //         'https://img.wanhuhealth.com/images_demo/drugs/20151202/f55ba86d210e4a91b4c8628638cbdb35.jpg',
      //       useAmount: 2,
      //       frequency: 1,
      //       dosage: '胶囊剂',
      //       amount: null,
      //       largeClass: '西药',
      //       maximumDoseDailyInUnit: null,
      //       retailPrice: null,
      //       adverseReactions: null,
      //       approvalNumber: null,
      //       recommendedLevel: null,
      //       isBasicMedicine: 0,
      //       mainIngredients: null,
      //       medicineCharacter: null,
      //       indication: null,
      //       usageDosage: null,
      //       taboo: null,
      //       note: null,
      //       fdaPregnancyDrugClass: null,
      //       pregnantDrug: null,
      //       youngDrug: null,
      //       elderDrug: null,
      //       drugInteractions: null,
      //       drugOverdose: null,
      //       toxicologicalStudy: null,
      //       drugEffects: null,
      //       drugPharmacokinetics: null,
      //       medicineStorage: null,
      //       packageInstrution: null,
      //       storageCondition: null,
      //       medicineValidate: null,
      //       clinicalGuidelineElectedInfo: null,
      //       medicalInsuranceDirectoryCategory: null,
      //       isJointStock: 0,
      //       consistency: 1,
      //       wanhuDrugRating: 2,
      //       type: null,
      //       pics: [],
      //       outPics: [],
      //       innerPics: [],
      //       supplier: null
      //     }
      //   ]
      // };
      // uni.navigateTo({
      //   url: '/pages/scanDrug/scanResult',
      //   success: (res) => {
      //     res.eventChannel.emit('drugsEvent', data.data);
      //   }
      // });
      // const ctx = uni.createCameraContext();
      // ctx.takePhoto({
      //   quality: 'high',
      //   success: (res) => {
      //     this.imgPath = res.tempImagePath;
      //     this.hideCoverImage = true;
      //     this.photoOverBtn = true;
      //   }
      // });
    },

    // 重拍
    again() {
      this.imgPath = null;
      this.hideCoverImage = false;
      this.photoOverBtn = false;
    },

    // 上传
    fulfill() {
      const self = this;
      uni.showToast({
        title: '上传中',
        icon: 'loading',
        duration: 15000,
        mask: true
      });

      uni.uploadFile({
        url: baseURL + '/drugs/searchDrugByImage',
        filePath: this.imgPath,
        name: 'file',
        header: {
          Authorization: `Bearer ${uni.getStorageSync('token')}`
        },
        complete: (uploadFileRes) => {
          const res = JSON.parse(uploadFileRes.data);
          if (res.code === 0 && res.data.length) {
            uni.hideToast();
            if (res.data.length === 1) {
              this.selectDrug(res.data[0]);
            } else {
              this.$store.commit('assess/SET_SCAN_DRUGS', res.data);
              this.$wxPromise.navigateTo({
                url: '/pages/searchDrug/index?source=scan'
              });
            }
          } else {
            uni.showToast({
              title: res.message || '暂无搜索结果,请重新拍取',
              icon: 'none'
            });
            self.again();
          }
        }
      });
    },

    // 选择搜索结果
    selectDrug(item) {
      item.useAmount = 1;
      this.$store.commit('assess/SET_DRUGS', item);
      uni.navigateBack();
    },

    error(e) {
      console.log(e);
      uni.showToast({
        title: '拍照失败',
        icon: 'none'
      });
    }
  }
};
</script>

<style lang="scss">
page {
  height: 100%;
}
.scan-drugs {
  height: 100%;
  background: #5d5d5d;
  position: relative;

  .camera {
    width: 100%;
    height: 100%;
  }

  .photo-opt {
    width: 100%;
    height: 172rpx;
    position: fixed;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .cover-img {
    width: 100%;
    height: 100%;
  }

  .photo-ing {
    width: 120rpx;
    height: 120rpx;
    margin: auto;
    margin-top: 28rpx;
  }
  .btn {
    width: 200rpx;
    height: 88rpx;
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    border-radius: 4rpx;
    background: #f34e1c;
    border-radius: 44rpx;
    line-height: 88rpx;
  }
  .tips_txt {
    font-size: 32rpx;
    position: fixed;
    bottom: 280rpx;
    left: 0;
    right: 0;
    text-align: center;
    color: #f4f4f4;
  }
}
</style>
